<html>
<head>
    <#assign basePath=request.contextPath>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>新增</title>
    <!-- Bootstrap Core CSS -->
    <link href="${basePath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="${basePath}/bootstrap/css/font-awesome.min.css" rel="stylesheet">
    <link href="${basePath}/bootstrap/css/form.lzy.css" rel="stylesheet">
    <link href="${basePath}/bootstrap/css/good.lzy.css" rel="stylesheet">
</head>
<body>
<div id="page-wrapper" >
    <div class="panel">
        <div class="panel-body">
            <form id="myForm" class="form-horizontal" method="post" enctype="multipart/form-data" >
                <input type="hidden" name="id" id="id" value="${identity.id}">

                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4"><font color="red">*</font> 身份名称：</span>
                    <div class="col-sm-9 col-xs-8">
                        <input type="text" class="form-control" size="30" name="name" id="name" value="${identity.name}" maxlength="10">
                    </div>
                </div>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4"><font color="red">*</font> 是否启用：</span>
                    <div id="wrap" class="col-sm-9 col-xs-8" style="width: 255px">
                        <label>
                            <input class="fixed" type="radio" class="form-control" size="30" name="status" id="status" value="0" <c:if test="${identity.status=='0'}">checked="checked" </c:if> ><span style="margin-left: 10px">启用</span>
                            <input class="hid hid1" type="radio" class="form-control" size="30" name="status" value="1" style="margin-left: 30px" <c:if test="${identity.status=='1'}">checked="checked" </c:if> ><span style="margin-left: 10px">禁用</span>
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4"><font color="red">*</font> 收益边界：</span>
                    <div class="col-sm-9 col-xs-8" id="incomeDiv" style="width: 300px">
                        <c:forEach items="${incomes}" var="income">
                            <label>
                                <input class="fixed" name="income" id="income" type="checkbox" value="${income.id}" <c:if test="${income.checked==1}">checked="checked" </c:if> ><span>${income.name}</span>
                            </label>
                        </c:forEach>
                    </div>
                </div>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4"><font color="red">*</font> 管理者：</span>
                    <div class="col-sm-9 col-xs-8" id="managerDiv" style="width: 400px">
                        <input type="text" class="form-control" size="30" name="manager" id="manager" value="${identity.managerName}" disabled>
                        <input type="hidden" id="managerId" name="managerId" value="${identity.managerId}">
                        <span class="super-btn">选择管理者</span>
                    </div>
                </div>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4">备注：</span>
                    <div class="col-sm-9 col-xs-8">
                        <input type="text" class="form-control" size="30" name="remark" id="remark" value="${identity.remark}" maxlength="30">
                    </div>
                </div>

                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4"></span>
                    <div class="col-sm-9 col-xs-8">
                        <button type="button" class="btn btn-success" onclick="submitForm();"><i class="fa fa-check"></i> 确定</button>
                        <button type="button" class="btn btn-info" onclick="closePage();"><i class="fa fa-close"></i> 关闭</button>
                    </div>
                </div>
            </form>

        </div>
    </div>
</div>

<!--推管理者列表-->
<div class="super-bg">
    <div class="super-box">
        <h3>选择管理者<i class="fa fa-close"></i></h3>
        <div class="super-tit">
            搜索：
            <input class="text" type="text" name="key" value="" placeholder="姓名/登录名/手机号">
            <input class="submit" type="submit" value="搜索" onclick="reSearch(1)">
            <button type="button" class="btn btn-success"><i class="fa fa-check"></i> 确定</button>
        </div>
        <div class="panel-body panel-white">
            <div class="table-responsive">
                <table width="95%" border="0" align="center"
                       id="myTable"
                       class="table table-hover"
                       data-url="${basePath}/admin/member/json"
                       data-pageSize="10,50,100" data-method="GET">
                    <thead>
                    <tr>
                        <th width="10%">ID</th>
                        <th width="25%">登录名</th>
                        <th width="25%">姓名</th>
                        <th width="25%">手机号码</th>
                        <th width="15%">操作</th>
                    </tr>
                    </thead>
                    <tbody id="tbodyId">

                    </tbody>
                </table>
            </div>
            <div class="row">
                <div align="left" class="col-xs-4">
                    <div class="input-group">
                        <span class="input-group-addon" id="pageCount"></span> <select
                            id="pageSize" onchange="reSearch(1)" class="form-control"
                            style="width: 100px"></select>
                    </div>
                </div>
                <div align="right" class="col-xs-8">
                    <ul class="pagination" id="pagination"></ul>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="good-add-suc">
    <span>
        <b>操作成功</b>
        该页面将在 5 秒后自动跳转！
        <a href="${basePath}/admin/identity" target="_parent">返回列表</a>
    </span>
</div>
<script src="${basePath}/bootstrap/js/jquery.min.js" type="text/javascript"></script>
<script src="${basePath}/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<!-- layer JavaScript -->
<script src="${basePath}/bootstrap/plugin/layer/layer.js" type="text/javascript"></script>
<script type="text/javascript" src="${basePath}/bootstrap/plugin/jqPaginator/jqPaginator.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
<script type="text/javascript">
    $(window).bootstrapValidator || document.write('<script src="${basePath}/bootstrap/js/bootstrapValidator.min.js"><\/script>');
</script>
<script>
    $(function(){
        $(".super-btn").click(function(){
            //初始化下拉框
            $("#pageSize").empty();
            var data = $('#myTable').attr('data-pageSize').split(',');
            for(var i=0;i<data.length;i++) {
                var option = $("<option>").text(data[i]).val(data[i]);
                $("#pageSize").append(option);
            }
            //定义查询选择框
            $.jqPaginator('#pagination', {
                totalPages: 100,
                visiblePages: 6,
                currentPage: 1,

                first: '<li class="first"><a href="javascript:void(0);">首页<\/a><\/li>',
                prev: '<li class="prev"><a href="javascript:void(0);">上一页<\/a><\/li>',
                next: '<li class="next"><a href="javascript:void(0);">下一页<\/a><\/li>',
                last: '<li class="last"><a href="javascript:void(0);">末页<\/a><\/li>',
                page: '<li class="page"><a href="javascript:void(0);">{{page}}<\/a><\/li>',
                onPageChange: function (num) {
                    reSearch(num);
                }
            });
        });

    });

    function reSearch(pageNum){
        //选择推荐人
        var $spbox = $(".super-bg");
        var $tbody = $(".super-box table tbody");
        $spbox.show();
        $tbody.html("");
        //加载层
        layer.load(2);
        //获取form表单传入参数
        var jsonData ={};

        jsonData.begin = (pageNum-1) * $('#pageSize').val();
        jsonData.rows = $('#pageSize').val();
        //计算当前页面
        jsonData.pageNum = pageNum;
        jsonData.pageSize = jsonData.rows;

        //搜索赋值
        var $spText = $(".super-tit input.text");
        var key = $spText.attr("name");
        jsonData[key] = $spText.val();

        //获取数据
        $.ajax({
            type:"GET",
            url:"${basePath}/admin/manager/json",
            dataType:"json",
            async:"true",
            data:jsonData,
            success:function(data){
                layer.closeAll('loading');
                $('#pageCount').html('当前总记录数:' + data.total);//显示记录数
                if(data.total > 0){
                    //计算页数
                    if(data.total%$('#pageSize').val() > 0){
                        var pageCount = (data.total - data.total%$('#pageSize').val())/$('#pageSize').val() + 1;
                    }else{
                        var pageCount = data.total/$('#pageSize').val();
                    }

                    $('#pagination').jqPaginator('option', {
                        currentPage: pageNum, //当前页数
                        totalPages: pageCount //总页数
                    });

                    //拼接显示数据
                    var rows = data.rows;
                    var temp = "";
                    for(var i in rows){
                        if(rows[i].id){
                            temp += "<tr><td width='10%'>"+rows[i].id+"</td>" +
                                    "<td width='25%'>"+rows[i].loginName+"</td>" +
                                    "<td width='25%'>"+rows[i].realName+"</td>" +
                                    "<td width='25%'>"+rows[i].phone+"</td>" +
                                    "<td width='15%' class='identity-add'><input type='checkbox' value=''></td></tr>";
                        }
                    }
                    $tbody.append(temp);
                    ChooseVal();
                }else{
                    $('#pageCount').html('当前总记录数:0');//显示记录数
                    $("#tbodyId").html('<tr align="center"><td colspan="' + $("#myTable").find("th").length + '">未查询到匹配的数据</td><tr>');
                }

                //设置统计结果
                if(typeof data.curPage != 'undefined'){
                    var cur = data.curPage;
                    for(var o in cur){
                        $("#"+o+"_cur").text(cur[o]);
                    }
                }
                //设置统计结果
                if(typeof data.allPage != 'undefined'){
                    var cur = data.allPage;
                    for(var o in cur){
                        $("#"+o+"_all").text(cur[o]);
                    }
                }

            },
            error:function(){
                console.log("error")
                //关闭加载层
                layer.closeAll('loading');
                $('#pageCount').html('当前总记录数:0');//显示记录数
                $("#tbodyId").html('<tr align="center"><td colspan="' + $("#myTable").find("th").length + '">未查询到匹配的数据</td><tr>');
            }
        });
        //关闭按钮
        $(".super-box .fa-close").click(function(){
            $spbox.hide();
            $tbody.html("");
            $(".super-tit input.text").val("");//清空搜索
        });

    };

    //选择函数
    var nameVal = $("#manager").val();
    var idVal = $("#managerId").val();
    var spArr = [],spId = [];
    nameVal && (spArr = nameVal.split(","));
    idVal && (spId = idVal.split(","));
    function ChooseVal(){
        var $sptr = $(".super-box table tbody tr");
        var $spbox = $(".super-bg");
        var $tbody = $(".super-box table tbody");
        //删除数组的元素 -- 定义局部方法
        Array.prototype.remove = function(val) {
            var index = this.indexOf(val);
            if (index > -1) {
                this.splice(index, 1);
            }
        };
        //判断复选框状态 -- id值是否在spId中
        $sptr.each(function(){
            var realId = $(this).find("td").eq(0).text();
            if(spId.indexOf(realId) != "-1"){
                $(this).find("td:last input").attr("checked","checked");
            }
        })

        $sptr.find("td:last input").change(function(){
            //var curTds = $(this).parent().parent().find("td");
            var curVal = $(this).parent().parent().find("td").eq(2).text();
            var curId = $(this).parent().parent().find("td").eq(0).text();
            if($(this).is(":checked") && (spId.indexOf(curId) == -1)){
                spArr.push(curVal);
                spId.push(curId);
            }
            else{
                spArr.remove(curVal);//删除数组的一个元素
                spId.remove(curId);
            }
        });

        $(".super-tit .btn-success").click(function(){
            var $vals = spArr.join(",");
            var $ids = spId.join(",");
            $("#manager").val($vals).siblings("input[name='managerId']").val($ids).change();
            //$("#managerDiv input[name='managerId']").val($vals)

            $spbox.hide();
            $tbody.html("");
            $(".super-tit input.text").val("");
        });
        //console.log(spId)
    };
    var action="${action}";
    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
    function closePage() {
        parent.layer.close(index);
    }
    function submitForm() {
        var bsVal = $("#myForm").data('bootstrapValidator');
        bsVal.validate();
        if(bsVal.isValid()) {
            //收益边界多选值处理
            var obj=document.getElementsByName('income');
            var income = '';
            for(var i=0; i<obj.length; i++){
                //关闭窗口并刷新页面
                if(obj[i].checked) income+= ','+obj[i].value;
            }
            if(income!=''){
                income = income.substring(1,obj.length-1);
            }
            var manager = $("#managerId").val();

                $.ajax({
                    url: '${basePath}/admin/identity/' + action,
                    dataType: 'json',
                    type: 'POST',
                    data: $("#myForm").serialize() + "&manager=" + manager,
                    success: function (data) {
                        if (data.code == '0000' || data.code == '0') {
                            layer.open({
                                type: 1,
                                title: false,
                                content: $(".good-add-suc"),
                                area: ['600px', '300px'],
                                time: 5000,
                                end: function () {
                                    parent.layer.closeAll();
                                    window.location.href = '${basePath}/admin/identity';
                                }
                            });
                        } else {
                            layer.alert(data.desc, {
                                icon: 56
                            });
                        }
                    },
                    error: function () {
                        layer.alert('系统错误', {
                            icon: 5
                        });
                    }
                });

        }
        else{
            var smallTop = $("small:visible").eq(0).offset().top - 50;
            $("html,body").animate({scrollTop:smallTop},300);
        }
    }
    $('#myForm').bootstrapValidator({
        excluded:[":disabled"],
        fields: {
            name: {
                validators: {
                    notEmpty: {
                        message: '请输入身份名称'
                    }
                }
            },
            status: {
                validators: {
                    notEmpty: {
                        message: '请选择是否启用'
                    }
                }
            },
            income: {
                validators: {
                    notEmpty: {
                        message: '请选择收益边界'
                    }
                }
            },
            managerId: {
                trigger:"change",
                validators: {
                    notEmpty: {
                        message: '请选择管理者'
                    }
                }
            }
        }
    });
</script>
</body>
</html>